<template>
  <div id="UserManager">
    <el-card class="box-card-main">
      <el-card class="box-card" shadow="nerve">
        <el-row>
          <el-col :span="4">
          </el-col>
          <el-col :span="2">
            <el-button type="primary" @click="openAddAndUpdateUserWindow('insert')">添加diy商品</el-button>
          </el-col>
        </el-row>
      </el-card>
      <el-card class="box-card" shadow="nerve" style="margin-top: 20px;height: 600px;overflow-y: scroll;">
        <el-table :data="userData" border >
          <el-table-column fixed prop="id" label="id" width="150"></el-table-column>
          <el-table-column prop="diyImageId" label="diy商品图片" width="200">
          <template slot-scope="scope">
                     <el-image style="width: 100px; height: 100px"
                       :src="'http://101.43.223.224:8765/image/getImageById?id='+scope.row.diyImageId"></el-image>
                   </template>
                   </el-table-column>
            <el-table-column prop="diyDetailsImageId" label="diy商品详情图片" width="250">
              <template slot-scope="scope">
                  <el-carousel height="150px">
                   <el-carousel-item v-for="item in scope.row.diyDetailsImageId.split(',')" :key="item">
                    <img height="150" width="150" :src="'http://101.43.223.224:8765/image/getImageById?id='+item">
                <!-- <template slot-scope="scope">
                     <el-image style="width: 100px; height: 100px"
                       :src="'http://101.43.223.224:8765/image/getImageById?id='+scope.row.diyDetailsImageId"></el-image>
                   </template> -->
                  </el-carousel-item>
                  </el-carousel>
              </template>
                   </el-table-column>
          <el-table-column prop="diyName" label="商品名称" width="200"></el-table-column>
          <el-table-column prop="diyPrice" label="商品原价" width="200"></el-table-column>
          <el-table-column prop="diyFavorablePrice" label="商品现价" width="200"></el-table-column>
          <el-table-column prop="diyVipPrice" label="vip价钱" width="200"></el-table-column>
          <el-table-column prop="diyGrade" label="商品评分" width="200"></el-table-column>
          <el-table-column prop="diyDetails" label="商品详情" width="200"></el-table-column>
          <el-table-column prop="typeB" label="分类" width="200"></el-table-column>
          <el-table-column prop="recommendedScenarios" label="推荐场景" width="200"></el-table-column>
          <el-table-column prop="recommendedPeopleNumber" label="推荐人数" width="200"></el-table-column>
          <el-table-column prop="detailsOfPurchaseInstructions" label="购买须知" width="200"></el-table-column>
          <el-table-column prop="salesVolume" label="销量" width="200"></el-table-column>
          <el-table-column prop="isOffer" label="特价" width="150">
                     <template slot-scope="scope">
                       <p>{{scope.row.isOffer===0?"原价":scope.row.isOffer===1?"特价":"888"}}</p>
                     </template>
          </el-table-column>
          <el-table-column prop="isOffer" label="特色" width="150">
                     <template slot-scope="scope">
                       <p>{{scope.row.isOffer===0?"非特色":scope.row.isOffer===1?"特色":"888"}}</p>
                     </template>
          </el-table-column>
          <el-table-column fixed="right" label="操作" width="340" align="center">
            <template slot-scope="scope">
              <el-button @click="openupCommodityInfoWindow(scope.row)" type="success" size="medium">编辑</el-button>
              <el-button @click="deletSlidesrById(scope.row.id)" type="danger" size="medium">下架</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageNum"
        :page-sizes="[1, 5, 10, 15]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        :background="true"
        style="margin: 30px 0 10px">
      </el-pagination>
      <el-dialog :title="windowTypeInfo" :visible.sync="controlAddAndUpdateUserWindow" width="45%" center>
        <el-form :model="diylistForm" ref="userFormRef" label-width="100px" class="demo-ruleForm">
          <el-form-item label="diy商品图片" style="margin-bottom: 0;">
              <el-upload
                class="avatar-uploader"
                action="action"
                :show-file-list="false"
                :before-upload="beforeAvatarUpload">
                <img v-if="imageUrl" :src="imageUrl" class="avatar" alt="轮播图">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </el-form-item>
             <el-form-item label="商品主图">
                <el-upload
                action="action"
                list-type="picture-card"
                class="upload-demo"
                :file-list="fileList1"
                :on-remove="afileremove"
                :before-upload="auploadbefore">
                <i class="el-icon-plus"></i>
                </el-upload>
                <el-dialog :visible.sync="dialogVisible">
                <img width="100%" :src="fileList1" alt="">
                </el-dialog>
                </el-form-item>
          <el-form-item label="id" prop="id" v-show="false">
            <el-input v-model="diylistForm.id"></el-input>
          </el-form-item>
          <el-form-item label="是否特价" prop="isOffer">
              <el-select v-model="diylistForm.isOffer" placeholder="请选择" style="width: 100%;">
                <el-option label="原价" :value="'0'"></el-option>
                <el-option label="特价" :value="'1'"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="是否特色" prop="isCharacteristic">
              <el-select v-model="diylistForm.isCharacteristic" placeholder="请选择" style="width: 100%;">
                <el-option label="非特色" :value="'0'"></el-option>
                <el-option label="特色" :value="'1'"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="分类" prop="diyClassificationId">
              <el-select v-model="diylistForm.diyClassificationId" placeholder="请选择" style="width: 100%;">
                <el-option
                v-for="item in commdiytypeDate"
                :key="item.typeSname"
                :label="item.typeSname"
                :value="item.id">
              </el-option>
              </el-select>
            </el-form-item>
          <el-form-item label="diy商品名称" prop="diyName">
            <el-input v-model="diylistForm.diyName" placeholder="请输入商品名称"></el-input>
          </el-form-item>
          <el-form-item label="diy商品原价" prop="diyPrice">
            <el-input v-model="diylistForm.diyPrice" placeholder="请输入商品原价"></el-input>
          </el-form-item>
          <el-form-item label="diy商品现价" prop="diyFavorablePrice">
            <el-input v-model="diylistForm.diyFavorablePrice" placeholder="请输入商品现价"></el-input>
          </el-form-item>
          <el-form-item label="vip价" prop="diyVipPrice">
            <el-input v-model="diylistForm.diyVipPrice" placeholder="请输入vip价格"></el-input>
          </el-form-item>
          <el-form-item label="商品评分" prop="diyGrade">
            <el-input v-model="diylistForm.diyGrade" placeholder="请输入评分"></el-input>
          </el-form-item>
          <el-form-item label="diy商品详情" prop="diyDetails">
            <el-input v-model="diylistForm.diyDetails" placeholder="请输入商品详情"></el-input>
          </el-form-item>

          <el-form-item label="推荐场景" prop="recommendedScenarios">
            <el-input v-model="diylistForm.recommendedScenarios" placeholder="请输入场景"></el-input>
          </el-form-item>
          <el-form-item label="推荐人数" prop="recommendedPeopleNumber">
            <el-input v-model="diylistForm.recommendedPeopleNumber" placeholder="请输入场景"></el-input>
          </el-form-item>
          <el-form-item label="购买须知详情" prop="detailsOfPurchaseInstructions">
            <el-input v-model="diylistForm.detailsOfPurchaseInstructions" placeholder="请输入购买须知"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="controlAddAndUpdateUserWindow = false">取 消</el-button>
          <el-button @click="resetForm('userFormRef')">重 置</el-button>
          <el-button type="primary" @click="slidesInfo('userFormRef')">确 定</el-button>
        </span>
      </el-dialog>
      <el-dialog @close="updateclose" title="修改信息" :visible.sync="diylistdaty" width="45%" center>
        <el-form :model="diylistForm" ref="userFormRef" label-width="100px" class="demo-ruleForm">
          <el-form-item label="diy商品图片" style="margin-bottom: 0;">
              <el-upload
                class="avatar-uploader"
                action="action"
                :show-file-list="false"
                :before-upload="beforeAvatarUploadb">
                <img v-if="imageUrl2" :src="imageUrl2" class="avatar" alt="轮播图">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </el-form-item>
             <el-form-item label="商品主图">
                <el-upload
                action="action"
                list-type="picture-card"
                class="upload-demo"
                :file-list="fileList2"
                :on-remove="bfileremove"
                :before-upload="auploadbefore2">
                <i class="el-icon-plus"></i>
                </el-upload>
               
                </el-form-item>
          <el-form-item label="id" prop="id" v-show="false">
            <el-input v-model="diylistForm.id"></el-input>
          </el-form-item>
          <el-form-item label="是否特价" prop="isOffer">
              <el-select v-model="diylistForm.isOffer" placeholder="请选择" style="width: 100%;">
                <el-option label="原价" :value="0"></el-option>
                <el-option label="特价" :value="1"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="是否特色" prop="isCharacteristic" >
              <el-select v-model="diylistForm.isCharacteristic" placeholder="请选择" style="width: 100%;">
                <el-option label="非特色" :value="0"></el-option>
                <el-option label="特色" :value="1"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="分类" prop="diyClassificationId">
              <el-select v-model="diylistForm.diyClassificationId" placeholder="请选择" style="width: 100%;">
                <el-option
                v-for="item in commdiytypeDate"
                :key="item.typeSname"
                :label="item.typeSname"
                :value="item.id">
              </el-option>
              </el-select>
            </el-form-item>
          <el-form-item label="diy商品名称" prop="diyName">
            <el-input v-model="diylistForm.diyName" placeholder="请输入商品名称"></el-input>
          </el-form-item>
          <el-form-item label="diy商品原价" prop="diyPrice">
            <el-input v-model="diylistForm.diyPrice" placeholder="请输入商品原价"></el-input>
          </el-form-item>
          <el-form-item label="diy商品现价" prop="diyFavorablePrice">
            <el-input v-model="diylistForm.diyFavorablePrice" placeholder="请输入商品现价"></el-input>
          </el-form-item>
          <el-form-item label="vip价" prop="diyVipPrice">
            <el-input v-model="diylistForm.diyVipPrice" placeholder="请输入vip价格"></el-input>
          </el-form-item>
          <el-form-item label="商品评分" prop="diyGrade">
            <el-input v-model="diylistForm.diyGrade" placeholder="请输入评分"></el-input>
          </el-form-item>
          <el-form-item label="diy商品详情" prop="diyDetails">
            <el-input v-model="diylistForm.diyDetails" placeholder="请输入商品详情"></el-input>
          </el-form-item>

          <el-form-item label="推荐场景" prop="recommendedScenarios">
            <el-input v-model="diylistForm.recommendedScenarios" placeholder="请输入场景"></el-input>
          </el-form-item>
          <el-form-item label="推荐人数" prop="recommendedPeopleNumber">
            <el-input v-model="diylistForm.recommendedPeopleNumber" placeholder="请输入场景"></el-input>
          </el-form-item>
          <el-form-item label="购买须知详情" prop="detailsOfPurchaseInstructions">
            <el-input v-model="diylistForm.detailsOfPurchaseInstructions" placeholder="请输入购买须知"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="openUpdatewindows = false">取 消</el-button>
          <el-button @click="resetForm('userFormRef')">重 置</el-button>
          <el-button type="primary" @click="update('userFormRef')">确 定</el-button>
        </span>
      </el-dialog>
    </el-card>
  </div>
</template>
<script>
export default {
name: 'UserManager',
data () {
  return {
    imageFile:'',
    imageFile2:'',
    controlAddAndUpdateUserWindow: false, // 控制添加或修改窗口是否打开
    openUpdatewindows: false,
    diylistdaty: false,
    windowTypeInfo: '', // 窗口类型信息
    imageUrl: '', // 图片回显路径
    imageUrl2: '', // 图片回显路径
    imageuil: '', // 图片回显路径
    id:'',
    imageId: '',
    fileList1:[],
    fileList2:[],
    commdiytypeDate:[],
    userData: [], // 用户数据
    diylistForm: { // 表单
      id: 0, // 主键
      diyName: '', //diy商品名称 
      diyPrice:'', //diy商品原价
      diyFavorablePrice:'', //diy商品现价
      diyVipPrice:'', //vip价
      diyGrade:'', //diy商品评分
      diyClassificationId:'', //diy商品分类id
      typeB:'',
      recommendedScenarios:'', //推荐场景
      recommendedPeopleNumber:'', //推荐人数
      detailsOfPurchaseInstructions:'', //购买须知详情
      salesVolume:'', //销量
      isOffer:'', //1特价 0不是特价
      isCharacteristic:'', //1特色 0不是特色
    },
    pageNum: 1, // 当前页数
    pageSize: 10, // 每页显示的个数
    total: 0, // 总条数
    delfilelist:[]
  }
},
mounted () {
  this.querysliderlist()
  this.diytype()
  this.getCommodityTypeAll()
},
methods: {
  updateclose(){
    this.fileList2=[]
  },
afileremove(file){
      for(var a in this.fileList1){
        if(this.fileList1[a].uid == file.uid){
          this.fileList1.splice(parseInt(a),parseInt(a)+1)
        }
      }
    },
bfileremove(file){
    if(file.file == undefined){
      this.delfilelist.push(file.id)
    }
      for(var a in this.fileList1){
        if(this.fileList2[a].uid == file.uid){
          this.fileList2.splice(parseInt(a),parseInt(a)+1)
        }
      }
    },
auploadbefore(file){
          console.log(file)
          this.fileList1.push({url:URL.createObjectURL(file),file:file})
          console.log(this.fileList1)

          return false
        }, 
        auploadbefore2(file){
          console.log(file)
          this.fileList2.push({url:URL.createObjectURL(file),file:file})
          console.log(this.fileList2)

          return false
        },

  // 下架diy商品
  deletSlidesrById (data) {
    this.$confirm('您将下架该商品，是否继续？', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }).then(() => {
      this.$axios.delete('handwork/handworkDel', {
        params: {
          id: data
        }
      }).then((result) => {
        if (result.data.flag) {
          this.querysliderlist()
          this.myMessage('success', result.data.data)
          this.$message({
           type: 'info',
          message: '成功下架'
      })
        } else {
          this.myMessage('warning', result.data.data)

        }
      }).catch((err) => {
        console.log(err)
      })
    }).catch(() => {
      this.$message({
        type: 'info',
        message: '已取消重置'
      })
    })
  },
  beforeAvatarUpload (file) {
    // 验证图片类型
    const isJPG = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/jpg'
    // 验证图片大小
    const isLt2M = file.size / 1024 / 1024 < 5
    // 提示
    if (!isJPG) {
      this.$message.error('上传头像图片只能是 ”图片“ 格式!')
    }
    if (!isLt2M) {
      this.$message.error('上传头像图片大小不能超过 5MB!')
    }
    // 赋值
    this.imageFile = file
    console.log(this.imageFile)
    // 图片回显
    this.imageUrl = URL.createObjectURL(file)
    return false
  },
  beforeAvatarUploadb (file) {
    // 验证图片类型
    const isJPG = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/jpg'
    // 验证图片大小
    const isLt2M = file.size / 1024 / 1024 < 5
    // 提示
    if (!isJPG) {
      this.$message.error('上传头像图片只能是 ”图片“ 格式!')
    }
    if (!isLt2M) {
      this.$message.error('上传头像图片大小不能超过 5MB!')
    }
    // 赋值
    this.imageFile2 = file
    console.log(this.imageFile2)
    // 图片回显
    this.imageUrl2 = URL.createObjectURL(file)
    return false
  },
  //查询分类信息
  diytype() {
    this.$axios.get('Commodity/getTypeName', {
   
    }).then((result) => {
      if (result.data) {
        this.commdiytypeDate = result.data.data
      }
    }).catch((err) => {
      console.log(err)
    })
      },
  // 查询全部diy信息
  querysliderlist () {
    this.$axios.get('handwork/diysList', {
      params: {
            pageNum: this.pageNum,
            pageSize: this.pageSize
          }
    }).then((result) => {
      if (result.data.flag) {
        this.userData = result.data.data.content
        this.total = result.data.data.totalSize
      }
    }).catch((err) => {
      console.log(err)
    })
  },
  //多图片修改
  update(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          const formData = new FormData()
    console.log(this.imageFile2)
    if (this.imageFile2) {
      formData.set('diyImageId1', this.imageFile2, this.imageFile2.name)
    } 
    if (this.fileList2.length>0) {
      this.delfilelist.forEach(a =>{
        var c = []

        this.diylistForm.diyDetailsImageId.forEach(b =>{
          if(a!=b){
            c.push(b)
          }
        })
        this.diylistForm.diyDetailsImageId=c
      })
      console.log(this.fileList2)
      for(var a in this.fileList2){
        if(this.fileList2[a].file){

          formData.append('diyDetailsImageId1', this.fileList2[a].file, this.fileList2[a].file.name)
        }
      }
    }
    for (const albumInfoKey in this.diylistForm) {
      if(this.diylistForm[albumInfoKey]){
        formData.set(albumInfoKey, this.diylistForm[albumInfoKey])
      }
        
    }
          this.$axios.post('handwork/HandworkDiyUpdate',
            formData
          ).then(res => {
            if (res.status === 200) {
              this.myMessage('success', '恭喜你，修改成功！')
              this.diylistdaty = false // 关闭窗口
              this.fileList2=[]
              // this.jsfileList2=[]
              this.formData = {
                id: '',
                commodityName: '',
                back:'',
                price: '',
                favorablePrice: '',
                vipPrice: '',
                typeId: '',
                goodsQuantity:''
              }
              this.imageFile = null
              this.querysliderlist()// 全查刷新
            }
          }).catch(err => {
            this.myMessage('warning', '对不起，保存失败，请完善未填信息或者稍后再试')
            console.log(err)
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
  // 保存用户信息
  slidesInfo (formName) {
    const formData = new FormData()
    console.log(this.imageFile)
    if (this.imageFile) {
      formData.set('diyImageId1', this.imageFile, this.imageFile.name)
    } 
    console.log(this.fileList1)
    if (this.fileList1.length>0) {
      for(var a in this.fileList1){

        formData.append('diyDetailsImageId1', this.fileList1[a].file, this.fileList1[a].file.name)
      }
    }
    for (const albumInfoKey in this.diylistForm) {
      if(this.diylistForm[albumInfoKey]){
        formData.set(albumInfoKey, this.diylistForm[albumInfoKey])
      }
        
    }
    this.$axios.post('handwork/diyAdd', formData).then((result) => {
      if (result.data.flag) {
        this.controlAddAndUpdateUserWindow = false
        this.querysliderlist()
        this.resetForm(formName)
        this.imageFile = File
        this.imageUrl = ''
      }
    }).catch((err) => {
      console.log(err)
    })
  },
  handleAvatarSuccess (res, file) {
      this.imageUrl = URL.createObjectURL(file.raw)
    },
    openupCommodityInfoWindow (row) { 
      this.windowTypeInfo = '修改diy信息'
      this.imageUrl2 = 'http://101.43.223.224:8765/image/getImageById?id=' + row.diyImageId
      this.imageuil = 'http://101.43.223.224:8765/image/getImageById?id=' + row.diyDetailsImageId
      this.diylistForm = JSON.parse(JSON.stringify(row))
      this.diylistForm.diyDetailsImageId=this.diylistForm.diyDetailsImageId.split(',')
      this.diylistForm.diyDetailsImageId.forEach(a =>{
        this.fileList2.push({url:'http://101.43.223.224:8765/image/getImageById?id='+a,id:a})
      })
      this.diylistdaty=true
  
      
      // this.openupdate= row
    },
  // 打开添加或修改角色信息窗口
  openAddAndUpdateUserWindow (windowType, row) {
    this.controlAddAndUpdateUserWindow = true
    if (windowType === 'insert') {
      this.windowTypeInfo = '添加diy'
      this.imageUrl = null
      this. diylistForm= { // 表单
        id: 0, // 主键
      diyName: '', //diy商品名称 
      diyPrice:'', //diy商品原价
      diyFavorablePrice:'', //diy商品现价
      diyVipPrice:'', //vip价
      diyImageId:'', //diy商品图片
      diyDetailsImageId:'', //diy商品详情图片
      diyGrade:'', //diy商品评分
      diyClassificationId:'', //diy商品分类id
      recommendedScenarios:'', //推荐场景
      recommendedPeopleNumber:'', //推荐人数
      detailsOfPurchaseInstructions:'', //购买须知详情
      salesVolume:'', //销量
      isOffer:'', //1特价 0不是特价
      isCharacteristic:'', //1特色 0不是特色
    }
    } else {
      this.windowTypeInfo = '修改diy信息'
      this.imageUrl = 'http://101.43.223.224:8765/image/getImageById?id=' + row.diyImageId
      this.imageuil = 'http://101.43.223.224:8765/image/getImageById?id=' + row.diyDetailsImageId
      this.diylistForm = JSON.parse(JSON.stringify(row))
    }
  },
  // 每页显示的个数
  handleSizeChange (val) {
    this.querysliderlist()
    this.pageSize = val
  },
  // 当前页数
  handleCurrentChange (val) {
    this.querysliderlist()
    this.pageNum = val
  },
  // 文本域最大显示数
  descInput () {
    const txtVal = this.diylistForm.back.length
    if (txtVal >= 250) {
      this.remnant = 0
    } else {
      this.remnant = 250 - txtVal
    }
  },
  myMessage (type, message) {
      this.$message({
        message: message,
        type: type
      })
    }
}
}
</script>

<style scoped>
  .box-card-main {
    height:820px;
  }
  .avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
::v-deep(.avatar-uploader .el-upload) {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
